<template>
    <div class="sjplatformAdd">
        <el-form label-width="100px">
            <el-form-item label="流程类型：">
                <el-tree-select v-model="flowStore.flowModel.flowTypeName" :data="flowTypeTree" check-strictly
                    @node-click="handleFlowTypeClick" placeholder="请选择..." />
            </el-form-item>
            <el-form-item label="审批流程：">
                <el-select v-model="flowStore.flowModel.flowName" @update:modelValue="handleFlowChange"
                    placeholder="请选择审批流程">
                    <el-option v-for="item in flowTable.flowTree" :key="item.id" :label="item.label" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item v-if="isSelectUser" label="选择审批人：">
                <el-input v-model="approveUserNames" placeholder="点击选择审批人" @click="openUserSelectForm('选择审批人', false)"
                    clearable @clear="clearpersons" />
            </el-form-item>
            <el-form-item label="流程图：">
                <FlowChart ref="chart" :flowId="approveStore.approveMainModel.flowId" :direction="'h'"
                    :chartWidth="chartWidth" />
            </el-form-item>
        </el-form>
    </div>
    <el-dialog v-model="isOpenUserSelectForm" :title="formTitle" width="50%" draggable :destroy-on-close="true">
        <UserSelect :initSelectedUser="initSelectedUser" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isOpenUserSelectForm = false;">取消</el-button>
                <el-button type="primary" @click="confirmPerson">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, onMounted } from "vue";
import { useFlowTable } from "../../hooks/FlowManager/useFlowTable";
import { useFlowTypeTable } from '../../hooks/FlowManager/useFlowTypeTable';
import { useFlowNodeTable } from "../../hooks/FlowManager/useFlowNodeTable";
import { useApproveStore } from "../../store/useApproveStore";
import { StatusEnum } from "../../hooks/Common/useStatusEnum";
import UserSelect from "../../components/SystemManager/User/UserSelect.vue";
import FlowChart from "./FlowChart.vue";
import emitter from "../../utils/emitter";

let receivedProps = defineProps(['fid', 'fname']);
let approveStore = useApproveStore();

let isSelectUser = ref(false);//是否选择审批人
let approveUserNames = ref('');
let approveUserIds = ref('');
let approveUsers = ref([]);

let chart = ref(null);
let chartWidth = window.innerWidth * 0.5;

let { flowTypeTree, getFlowTypeTree } = useFlowTypeTable(1, 10);
getFlowTypeTree();

let { flowTable, flowStore, getFlowByFlowType } = useFlowTable(0, 10);
let { flowNodeTable, getFlowStartNode, getFlowNodeApproveUser, getFlowNodeApproveUserByRoleId } = useFlowNodeTable();

flowStore.flowModel.flowTypeName = '';
flowStore.flowModel.flowName = '';
approveStore.approveMainModel.approveRecords = [];

//主审批流程
approveStore.approveMainModel.fId = receivedProps.fid;
approveStore.approveMainModel.status = StatusEnum.SubmitApproval;

function handleFlowChange(flowId) {
    approveStore.approveMainModel.flowId = flowId;
    chart.value.loadChart(flowId);
    //主审批流名称
    approveStore.approveMainModel.approveName = receivedProps.fname + "_" + flowTable.flowTree.find(f => f.id == flowId).label;

    //////////////添加审批记录
    //获取流程的第一个节点
    getFlowStartNode(flowId).then(() => {
        //专人审批
        if (flowNodeTable.flowStartNode.approveType == 1) {
            getFlowNodeApproveUser(flowNodeTable.flowStartNode.id).then(() => {
                for (let au of flowNodeTable.flowNodeApproveUsers) {
                    approveStore.approveMainModel.approveRecords.push({
                        flowId: flowId,
                        nodeId: flowNodeTable.flowStartNode.id,
                        approveUserId: au.approveUserId,
                        approveUserName: au.approveUserName
                    });
                }
            })
        }

        //角色审批
        if (flowNodeTable.flowStartNode.approveType == 2) {
            getFlowNodeApproveUserByRoleId(flowNodeTable.flowStartNode.approveRoleId).then(() => {
                for (let au of flowNodeTable.flowNodeApproveUsers) {
                    approveStore.approveMainModel.approveRecords.push({
                        flowId: flowId,
                        nodeId: flowNodeTable.flowStartNode.id,
                        approveUserId: au.id,
                        approveUserName: au.realName
                    });
                }
            })
        }

        //直属上级审批
        if (flowNodeTable.flowStartNode.approveType == 3) {

        }

        //其他
        if (flowNodeTable.flowStartNode.approveType == 4) {
            isSelectUser.value = true;
        }
    })
}
function handleFlowTypeClick(flowType) {
    flowStore.flowModel.flowTypeId = flowType.id;
    flowStore.flowModel.flowTypeName = flowType.label;

    approveStore.approveMainModel.flowTypeId = flowType.id;
    approveStore.approveMainModel.flowTypeName = flowType.label;

    flowStore.flowModel.flowName = '';

    getFlowByFlowType(flowStore.flowModel.flowTypeId);
};

/*--------------------选择负责人开始--------------------*/
let isOpenUserSelectForm = ref(false); //是否打开用户选择窗口
let formTitle = ref("");
let initSelectedUser = reactive({
    single: false,
    selectedrow: [],
});
//打开人员选择窗口
function openUserSelectForm(title, value) {
    formTitle.value = title;
    initSelectedUser.single = value;
    initSelectedUser.selectedrow = approveUserIds.value.split(',');
    isOpenUserSelectForm.value = true;
}
//清理负责人
function clearpersons() {
    approveUserNames.value = '';
    approveUserIds.value = '';
    approveUsers.value = [];
}
//确认选择的负责人
function confirmPerson() {
    emitter.emit("confirmSelectedUser");
}
//供用户选择调用设置选择的项
emitter.on("set-selected-user", (SelectionRows: any) => {
    let selectedUserId = [];
    let selectedUserName = [];
    clearpersons();
    for (let item of SelectionRows) {
        selectedUserId.push(item.id);
        selectedUserName.push(item.realName);
        approveUsers.value.push({ userId: item.id, userName: item.realName });

        approveStore.approveMainModel.approveRecords.push({
            flowId: approveStore.approveMainModel.flowId,
            nodeId: flowNodeTable.flowStartNode.id,
            approveUserId: item.id,
            approveUserName: item.realName
        });
    }
    approveUserNames.value = selectedUserName.join(",");
    approveUserIds.value = selectedUserId.join(",");

    isOpenUserSelectForm.value = false;
});
/*--------------------选择负责人结束--------------------*/

onMounted(() => {
    chart.value.loadChart('');
});
</script>